<template>
	<view>
		<u-popup class="pay-methods-wrapper" :closeable="true" close-icon-pos="top-left" @close="methodHide"
			v-model="methodShow" mode="bottom">
			<div class="wrapper">
				<div class="tip-money">
					<div class="title">{{methodsTitle}}</div>
				</div>
				<div class="pay-money-wrapper">
					<div class="money">
						<span class="name">价格：</span>
						<span class="money">{{hbPrice}}</span>
					</div>
					<div class="money">
						<span class="name">会员价：</span>
						<span class="money">{{price}}</span>
					</div>
				</div>
				<div class="pay-method">
					<div class="title">选择您的支付方式</div>
					<div class="pay-item" @click="payChoose('wechat')">
						<image src="/static/icon-wechat.png" class="image" mode="aspectFill"></image>
						<div class="name">微信支付</div>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</div>
					<div class="pay-item" @click="walletShow=!walletShow">
						<image src="/static/logo-image.png" class="image" mode="aspectFill"></image>
						<div class="name">焕贝支付</div>
						<u-icon :name="walletShow?'arrow-down':'arrow-right'" color="#999999"></u-icon>
					</div>
					<div v-if="walletShow">
						<div class="wallet-list" v-if="walletList!==0">
							<div class="wallet-item" :class="{'choose':item.choose}" v-for="(item,index) in walletList"
								@click="chooseWallet(item)">
								<div class="icon">
									<u-icon size="40" :color="!item.choose?'#ffffff':'#1AFA29'"
										name="checkmark-circle-fill"></u-icon>
								</div>
								<div>
									<div class="name">{{item.name}}</div>
									<div class="money">
										<div class="yue">余额：{{item.money}}</div>
										<div class="can-use-yue">可用：{{item.canUseMoney}}</div>
									</div>
								</div>
								<!-- <div class="team" v-if="item.team===true">
									<div class="text">可组合</div>
									<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
								</div> -->
							</div>
						</div>
					</div>
					<div class="button-wrapper">
						<button class="button-pay" @click="payChoose('wallet')">立即支付</button>
					</div>
				</div>
			</div>
		</u-popup>
		<u-popup class="pay-password-wrapper" :closeable="true" close-icon-pos="top-left" close-icon="arrow-left"
			@close="passwordHide" v-model="passwordShow" mode="bottom">
			<div class="tip-money">
				<div class="title">{{passwordTitle}}</div>
				<div class="password-wrapper">
					<div class="item">
						<span class="text" v-if="password[0]!==undefined"></span>
					</div>
					<div class="item">
						<span class="text" v-if="password[1]!==undefined"></span>
					</div>
					<div class="item">
						<span class="text" v-if="password[2]!==undefined"></span>
					</div>
					<div class="item">
						<span class="text" v-if="password[3]!==undefined"></span>
					</div>
					<div class="item">
						<span class="text" v-if="password[4]!==undefined"></span>
					</div>
					<div class="item">
						<span class="text" v-if="password[5]!==undefined"></span>
					</div>
				</div>
			</div>
			<div class="jsq-wrapper">
				<div class="flex">
					<div class="box one">
						<div class="inner" @click="operate(1)">1</div>
					</div>
					<div class="box two">
						<div class="inner" @click="operate(2)">2</div>
					</div>
					<div class="box three">
						<div class="inner" @click="operate(3)">3</div>
					</div>
				</div>
				<div class="flex">
					<div class="box four">
						<div class="inner" @click="operate(4)">4</div>
					</div>
					<div class="box five">
						<div class="inner" @click="operate(5)">5</div>
					</div>
					<div class="box six">
						<div class="inner" @click="operate(6)">6</div>
					</div>
				</div>
				<div class="flex">
					<div class="box seven">
						<div class="inner" @click="operate(7)">7</div>
					</div>
					<div class="box eight">
						<div class="inner" @click="operate(8)">8</div>
					</div>
					<div class="box nine">
						<div class="inner" @click="operate(9)">9</div>
					</div>
				</div>
				<div class="flex">
					<div class="box empty">
						<div class="inner"></div>
					</div>
					<div class="box zero">
						<div class="inner" @click="operate(0)">0</div>
					</div>
					<div class="box del">
						<div class="inner" @click="operate('del')">删除</div>
					</div>
				</div>
			</div>
		</u-popup>
		<u-popup v-model="detailShow" border-radius="12" mode="center">
			<div class="pay-detail">
				<div class="title">
					<div class="text all" v-if="successPrice!==0">支付总价：{{successPrice}}</div>
					<div class="text" v-if="hbPrice!==0"><span>商品价格：</span><span>{{goodsPrice}}</span></div>
					<div class="text" v-if="commission!==0"><span>手续费：</span><span>{{commission}}</span></div>
					<div class="text" v-if="freightPrice!==0"><span>运费：</span><span>{{freightPrice}}</span></div>
				</div>
				<div class="operate-wrapper">
					<button border="bottom" class="button del" @click="detailShow=false">取消</button>
					<button border="bottom" class="button confirm"
						@click="detailShow=false;showPasswordPopup()">确定</button>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	// this.rate   根据当前会员等级换算出来的汇率.
	/**  
	 * popup弹出的时候，根据父组件传参sn 获取收银台数据  例如，订单价格、汇率。各个钱包余额                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
	 * 
	 *
	 * ----微信支付
	 * 1，创建在线充值订单
	 * showMethodPopup
	 * 参数
	 *  rechargeType
	 *  ordersn  o开头
	 * 2.支付订单  发起支付 API_Trade.initiatePay
	 * 参数  orderType  clientType  owner
	 * 3.吊旗微信支付
	 * uni.requestPayment
	 * success  支付成功回调
	 *finish===refresh  想父组件发起通讯，让父组件刷新
	 * else 成功跳转
	 * 
	 * 
	 * ----焕贝支付
	 * showMethodPopup
	 * 输入密码
	 * 支付订单
	 * 
	 * 
	 * ----充值，直接微信支付
	 * 直接调用payChoose方法
	 * 
	 * 
	 * ----输入密码
	 * */
	import {
		Recharge,
	} from "@/api/members";
	import * as API_Trade from "@/api/trade";
	import storage from "@/utils/storage.js";
	import BigNumber from 'bignumber.js'
	export default {
		name: "pay-methods",
		props: {
			// 页面来源
			origin: {
				default: '',
				type: String
			},
			// 当前需要支付的订单号
			sn: {
				default: '',
				type: String
			},
			// 当前需要支付的订单类型
			type: {
				default: '',
				type: String
			},
			// 充值类型   6 订单微信支付 46 线下扫码支付
			rechargeType: {
				default: 0,
				type: Number
			},
			closeTip: {
				default: '0',
				type: String
			},
			finish: {
				default: 'navigateTo',
				type: String
			},
			client: { // 只有扫码支付用，传NATIVE
				default: '',
				type: String
			},
			// 选择支付方式的弹窗标题
			methodsTitle: {
				default: '确认付款',
				type: String
			},
			passwordTitle: {
				default: '请输入支付密码',
				type: String
			},
			zero: {
				default: '0', // 是否允许为0    1允许  0不允许
				type: String
			},
			disabled: {
				type: Boolean,
				default:false
			}

		},
		data() {
			return {
				//  start  popup  选择支付方式
				methodShow: false,
				hbPrice: 0, // 当前需要支付的焕贝额
				goodsPrice: 0, // 商品价格
				price: 0, // 当前需要支付的人民币额
				orderSn: '', // 订单SN   O开头的订单号
				partnerType: 0, // 当前合伙人身份
				businessState: false, // 当前店铺状态
				walletShow: false,
				walletList: [], // 可用钱包列表
				//  end  popup  选择支付方式
				//  start  popup  输入密码
				passwordShow: false, // 显示或者隐藏弹出层
				password: [],
				//  end  popup  输入密码
				// 订单明细 --start--
				detailShow: false,
				freightPrice: 0, // 运费
				successPrice: 0, // 焕贝支付一共需要的焕贝额
				commission: 0, // 手续费
				// 订单明细 --end--
			};
		},
		created() {
			this.initHL()
			//初始化参数
			// #ifdef APP-PLUS
			this.paymentType = "APP";
			this.paymentClient = "APP";
			//#endif
			// #ifdef MP-WEIXIN
			this.paymentType = "WECHAT_MP";
			this.paymentClient = "MP";
			//#endif
		},
		watch: {
			hbPrice(newValue, oldValue) {
				if (newValue >= 0) {
					this.price = new BigNumber(newValue).minus(this.freightPrice).multipliedBy(this.rate).plus(this
						.freightPrice).dp(2, BigNumber.ROUND_DOWN).toNumber()
				}
			}
		},
		methods: {
			// 显示选择支付方式弹窗并初始化收银台数据
			showMethodPopup() {
				this.initMoney()
			},
			// 显示密码弹窗
			showPasswordPopup() {
				let userinfo = storage.getUserInfo()
				if (userinfo.noSecret) {
					uni.showToast({
						icon: "loading",
						title: '免密支付...'
					})
					this.$emit("passwordFinish", '')
					if (this.owner) {
						this.pay({
							method: 'WALLET',
							sn: this.sn,
							owner: this.owner,
							paymentPassword: ''
						})
					}
				} else {
					if (!userinfo.paymentPassword) {
						uni.showModal({
							title: '密码提示',
							content: '请先去设置支付密码',
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/mine/set/securityCenter/safe"
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return
					}
					this.passwordShow = true
				}
			},
			/**
			 *  关闭订单支付页面
			 * 因为已经创建订单 先提示用户是否放弃付款   是跳转订单列表页面  否继续留在此页面
			 * */
			methodHide() {
				let that = this
				if (this.closeTip === '1' && this.methodHideTip !== false) {
					uni.showModal({
						content: '是否放弃本次付款',
						showCancel: true,
						cancelText: '放弃',
						confirmText: '继续付款',
						success: function(resmodal) {
							if (resmodal.confirm) {
								that.methodShow = true
							} else if (resmodal.cancel) {
								uni.redirectTo({
									url: `/pages/order/myOrder?status=1`
								});
							}
						}
					})
				}
			},
			// 选择支付方式
			payChoose(method, vipParams) {
				let parameter = {}
				if (method === 'wechat') {
					this.paymentClient = "MP";
					// 微信支付
					if (vipParams) {
						parameter = {
							method,
							...vipParams
						}
					} else {
						parameter = {
							method,
							orderSn: this.orderSn,
							hbPrice: this.hbPrice,
							price: this.price,
							rechargeType: this.rechargeType
						}
					}
					this.orderType = "RECHARGE"
					this.successPrice = parameter.price
					let params = parameter
					if (this.zero === '0' && parameter.price == 0) return
					Recharge(params).then((resRecharge) => {
						if (resRecharge.data.success) {
							if (parameter.price > 0) {
								this.pay({
									method: 'WECHAT',
									sn: resRecharge.data.result.rechargeSn,
									owner: 'RECHARGE'
								})
							} else {
								this.$emit('payFinish')
							}
						}
					});
				} else if (method === 'wallet') {
					this.paymentClient = "MP";
					if (this.client) {
						this.paymentClient = this.client
					}
					// 焕贝支付
					let chooseList = []
					let owner = []
					let money = 0
					for (let i = 0; i < this.walletList.length; i++) {
						if (this.walletList[i].choose === true) {
							chooseList.push(this.walletList[i])
							money += this.walletList[i].canUseMoney
							owner.push(this.walletList[i].owner)
						}
					}
					if (chooseList.length === 0) {
						uni.showToast({
							title: '请选择钱包',
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (this.hbPrice > money) {
						uni.showModal({
							content: '该钱包余额不足以支付订单,请充值!',
							showCancel: true,
							confirmText: '去充值',
							success: function(resmodal) {
								if (resmodal.confirm) {
									uni.navigateTo({
										url: `/pages/mine/deposit/recharge?orderType=ORDER`
									})
								} else if (resmodal.cancel) {
									console.log('用户点击取消');
								}
							}
						})
						this.methodShow = false
						return
					}
					this.orderType = this.type
					this.successPrice = this.hbPrice
					if (owner.length === 1) {
						if (owner[0] === 'RECHARGE') {
							this.successPrice = this.hbPrice
						} else {
							this.successPrice = new BigNumber(this.hbPrice)
								.minus(this.freightPrice).multipliedBy(1 + this.fee).plus(this.freightPrice)
						}
					} else {
						if (owner[1] === 'RECHARGE') {
							let needFee = new BigNumber(this.hbPrice).minus(this.freightPrice).toNumber()
							let noneedFee = this.freightPrice
							if (needFee > this.walletList[0].canUseMoney) {
								let canUseMoney = new BigNumber(this.walletList[0].money).div(1 + this.fee).toNumber()
								this.successPrice = this.walletList[0].money + this.hbPrice - canUseMoney
							} else {
								this.successPrice = new BigNumber(needFee).multipliedBy(1 + this.fee).plus(noneedFee)
							}

						} else {
							this.successPrice = new BigNumber(this.hbPrice)
								.minus(this.freightPrice).multipliedBy(1 + this.fee).plus(this.freightPrice)
						}
					}
					this.successPrice = new BigNumber(this.successPrice).dp(2, BigNumber.ROUND_DOWN).toNumber()
					this.commission = new BigNumber(this.successPrice).minus(this.hbPrice).toNumber()
					this.owner = owner.join(',')
					// 如果是订单 弹窗提示手续费是多少
					if (this.origin === 'order') {
						this.detailShow = true
					} else {
						this.showPasswordPopup()
					}
				}
			},
			// 订单支付
			pay(parameter) {
				//支付方式 WECHAT/ALIPAY
				const paymentMethod = parameter.method;
				let params = {
					sn: parameter.sn,
					orderType: this.orderType,
					clientType: this.paymentType,
					owner: parameter.owner
				};
				if (parameter.paymentPassword) {
					params.paymentPassword = parameter.paymentPassword
				}
				// 客户端类型 APP/NATIVE/JSAPI/H5
				const paymentClient = this.paymentClient;
				//微信小程序
				API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
					(res) => {
						uni.hideToast()
						let response = res.data.result;
						//如果支付异常
						if (!res.data.success) {
							uni.showModal({
								content: res.data.message,
								showCancel: false,
								confirmText: res.data.code === 34001 ? '去充值' : '确定',
								success: function(resmodal) {
									if (resmodal.confirm) {
										if (res.data.code === 34001) {
											uni.navigateTo({
												url: `/pages/mine/deposit/recharge?orderType=ORDER`
											})
										}
									} else if (resmodal.cancel) {
										console.log('用户点击取消');
									}
								}
							})
							return;
						}
						if (paymentMethod === "WECHAT") {
							uni.requestPayment({
								provider: "wxpay",
								appid: response.appid,
								timeStamp: response.timeStamp,
								nonceStr: response.nonceStr,
								package: response.package,
								signType: response.signType,
								paySign: response.paySign,
								success: (e) => {
									uni.showToast({
										icon: "none",
										title: "支付成功!",
									});
									this.callback(paymentMethod)
								},
								fail: (e) => {
									this.exception = e;
									uni.showModal({
										content: "支付失败,如果您已支付，请勿反复支付",
										showCancel: false,
									});
								},
							});
						} else {
							uni.showToast({
								icon: "none",
								title: "支付成功!",
							});
							this.callback(paymentMethod)
						}
					}
				);
			},
			/**
			 * 支付成功后跳转
			 */
			callback(paymentMethod) {
				this.methodHideTip = false
				this.methodShow = false
				this.passwordShow = false
				let that = this
				if (this.finish === 'refresh') {
					this.$emit('payFinish', {
						paymentMethod: paymentMethod,
						payPrice: this.successPrice,
						orderType: this.type,
					})
					return
				}
				let url = "/pages/cart/payment/success?" +
					"paymentMethod=" + paymentMethod +
					"&payPrice=" + this.successPrice +
					"&origin=" + this.origin +
					"&hbPrice=" + new BigNumber(this.hbPrice).minus(this.freightPrice).toNumber() +
					"&commission=" + this.commission +
					"&freightPrice=" + this.freightPrice +
					"&orderType=" + this.type +
					"&rechargeType=" + this.rechargeType
				if (this.client === 'NATIVE') {
					url += "&appraise=1&orderSn=" + this.orderSn
				}
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 获取收银台详情
			 */
			initMoney() {
				let parms = {};
				parms.sn = this.sn;
				parms.orderType = this.type;
				parms.clientType = this.paymentType;
				parms.owner = 'RECHARGE'
				API_Trade.getCashierData(parms).then((res) => {
					if (res.data.success) {
						this.$emit('update:disabled',false)
						let fee = res.data.result.fee || 0.06
						let freightPrice = res.data.result.freightPrice || 0

						this.fee = fee
						this.hbPrice = res.data.result.price;
						this.goodsPrice = res.data.result.goodsPrice;
						this.orderSn = res.data.result.orderSns;
						this.freightPrice = freightPrice; // 运费
						// start 余额支付--钱包列表
						let walletValue = res.data.result.walletValue || 0;
						let walletSaleValue = res.data.result.walletSaleValue || 0;
						let walletPromoteValue = res.data.result.walletPromoteValue || 0;
						let walletPromoteFwValue = res.data.result.walletPromoteFwValue || 0;
						let walletPromoteHyValue = res.data.result.walletPromoteHyValue || 0;
						walletValue = new BigNumber(walletValue).dp(2, BigNumber.ROUND_DOWN).toNumber()
						walletSaleValue = new BigNumber(walletSaleValue).dp(2, BigNumber.ROUND_DOWN).toNumber()
						walletPromoteValue = new BigNumber(walletPromoteValue).dp(2, BigNumber.ROUND_DOWN)
							.toNumber()
						walletPromoteFwValue = new BigNumber(walletPromoteFwValue).dp(2, BigNumber.ROUND_DOWN)
							.toNumber()
						walletPromoteHyValue = new BigNumber(walletPromoteHyValue).dp(2, BigNumber.ROUND_DOWN)
							.toNumber()
						let walletList = [{
							name: '余额钱包',
							money: walletValue,
							canUseMoney: walletValue,
							owner: 'RECHARGE'
						}]
						if (walletSaleValue > 0) {
							walletList.unshift({
								name: '销售钱包',
								money: walletSaleValue,
								canUseMoney: new BigNumber(walletSaleValue).div(1 + fee)
									.dp(2, BigNumber.ROUND_DOWN).toNumber(),
								owner: 'SALE',
								choose: true
							})
						}
						if (this.partnerType === 4 || this.partnerType === 4) {
							walletList.unshift({
								name: '推广钱包-服务费',
								money: walletPromoteFwValue,
								canUseMoney: new BigNumber(walletPromoteFwValue).div(1 + fee)
									.dp(2, BigNumber.ROUND_DOWN).toNumber(),
								owner: 'PROMOTE_FW'
							})
							let walletData = {
								name: '推广钱包-会员费',
								money: walletPromoteHyValue,
								canUseMoney: new BigNumber(walletPromoteHyValue).div(1 + fee)
									.dp(2, BigNumber.ROUND_DOWN).toNumber(),
								owner: 'PROMOTE_HY'
							}
							if (walletData.canUseMoney < this.hbPrice) {
								walletData.team = true
							}
							walletList.unshift(walletData)
						} else if (this.partnerType === 1 || this.partnerType === 2) {
							let walletData = {
								name: '推广钱包',
								money: walletPromoteValue,
								canUseMoney: new BigNumber(walletPromoteValue).div(1 + fee)
									.dp(2, BigNumber.ROUND_DOWN).toNumber(),
								owner: 'PROMOTE'
							}
							if (walletData.canUseMoney < this.hbPrice) {
								walletData.team = true
							}
							walletList.unshift(walletData)
						}
						this.walletList = walletList
						// end 余额支付--钱包列表
						this.methodHideTip = true
						this.methodShow = true
					} else if (res.data.code == 32000) {
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/order/myOrder?status=0`
							});
						}, 500)
					}
				});
			},
			// 焕贝支付 选择具体钱包进行支付
			chooseWallet(item) {
				if (item.canUseMoney === 0) return
				let clickChoose = item.choose
				let chooseList = []
				for (let i = 0; i < this.walletList.length; i++) {
					if (this.walletList[i].choose === true) {
						chooseList.push(this.walletList[i].name)
					}
				}
				let isHav = chooseList.indexOf(item.name)
				if (isHav === -1) {
					if (chooseList.length === 0) {
						chooseList.push(item.name)
					} else if (chooseList.length === 2) {
						chooseList.pop()
						chooseList.push(item.name)
					} else if (chooseList.length === 1) {
						if (chooseList[0] === this.walletList[0].name && this.walletList[0].team === true) {
							chooseList.push(item.name)
						} else if (item.team === true) {
							chooseList.push(item.name)
						} else {
							chooseList.pop()
							chooseList.push(item.name)
						}
					}
				} else {
					chooseList.splice(chooseList.indexOf(item.name), 1)
				}
				this.walletList = this.walletList.map((item) => {
					if (chooseList.indexOf(item.name) === -1) {
						item.choose = false
					} else {
						item.choose = true
					}
					return item
				})
			},
			/**
			 * 初始化汇率、个人用户信息（会员身份）、店铺信息
			 * */
			initHL() {
				let rate = storage.getVipRate();
				this.vipRate = rate
				this.userInfo = this.$options.filters.isLogin();
				if (this.userInfo.gradeName && rate[this.userInfo.gradeName].rate) {
					this.rate = rate[this.userInfo.gradeName].rate
				} else {
					this.rate = rate['0'].rate
				}
				let userinfo = storage.getUserInfo()
				this.partnerType = userinfo.partnerType
				let businessState = storage.getBusiness()
				this.businessState = businessState
				// 'userInfo.partnerType==4'城市合伙人
				// 'userInfo.partnerType==1'事业合伙人
				// 'userInfo.partnerType===2'天使合伙人
			},
			/**
			 * 关闭选择器
			 */
			passwordHide() {
				this.password = []
				this.passwordShow = false;
			},
			/**
			 * 输入密码操作
			 * */
			operate(text) {
				if (text == 'del') {
					if (this.password.length != 0) {
						this.password.pop()
					}
				} else {
					if (this.password.length < 6) {
						this.password.push(text)
						if (this.password.length == 6) {
							this.$emit("passwordFinish", this.password.join(''))
							if (this.owner) {
								uni.showToast({
									icon: "loading",
									text: '免密支付...'
								})
								this.pay({
									method: 'WALLET',
									sn: this.sn,
									owner: this.owner,
									paymentPassword: this.password.join('')
								})
							}
							setTimeout(() => {
								this.passwordHide()
							}, 300)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scope>
	.pay-methods-wrapper {
		.wrapper {
			background-color: #F0F0F0;
		}

		.tip-money {
			.title {
				line-height: 120upx;
				text-align: center;
				font-size: 36upx;
				font-weight: bold;
			}
		}

		.pay-money-wrapper {
			text-align: center;

			.name {
				font-size: 28upx;
				margin-right: 16upx;
			}

			.money {
				font-size: 36upx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}

		}

		.pay-method {
			margin-top: 40upx;

			.title {
				font-size: 24upx;
				color: #7a7a7a;
				padding: 0 24upx;
			}

			.pay-item {
				margin-top: 16upx;
				padding: 0 24upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100upx;
				background-color: #ffffff;

				.image {
					margin-right: 16upx;
					width: 48upx;
					height: 48upx;
				}

				.name {
					flex: 1;
				}

			}

			.wallet-list {
				padding-top: 24upx;
				display: flex;
				flex-direction: column-reverse;

				.wallet-item {
					background-color: #E6E6E6FF;
					margin-bottom: 4upx;
					display: flex;
					align-items: center;
					height: 120upx;
					padding: 24upx;
					font-size: 26upx;



					.icon {
						display: block;
						margin-right: 16upx;
						background-color: #ffffff;
						border-radius: 50%;
						width: 32upx;
						height: 32upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.name {
						font-size: 28upx;
						color: #808080;
					}

					.money {
						margin-top: 8upx;
						display: flex;
						color: #A6A6A6;

						.yue {
							margin-right: 24upx;
						}
					}

					.team {
						display: flex;
						justify-content: center;
						align-items: center;
						color: aqua;
					}
				}
			}

			.button-wrapper {
				padding: 60upx 0;
			}

			.button-pay {
				width: 600upx;
				height: 68upx;
				line-height: 68upx;
				background: linear-gradient(162.65deg, rgba(255, 98, 0, 1) 0%, rgba(240, 139, 67, 0.65) 100%);
				border-radius: 48upx;
				color: #ffffff;
				font-size: 24upx;
			}
		}
	}

	.pay-password-wrapper {
		.tip-money {
			margin: 0 auto;
			padding: 24upx;
			width: 500upx;
			background-color: #ffffff;
			margin-bottom: 100upx;
			border-radius: 8upx;

			.title {
				text-align: center;
				font-size: 26upx;
				font-weight: bold;
				margin: 24upx 0;
			}

			.money {
				text-align: center;
				font-weight: bold;

				.icon {
					font-size: 32upx;
				}

				.text {
					font-size: 44upx;
				}
			}

			.method {
				border-top: 2upx solid #f1f1f1;
				margin: 24upx;
				padding: 32upx 0;
				font-size: 24upx;
			}

			.password-wrapper {
				margin-top: 24upx;
				display: flex;
				justify-content: center;

				.item {
					margin: 24upx;
					width: 60upx;
					height: 60upx;
					background-color: #dddddd;
					border-radius: 8upx;
					margin: 0 8upx;
					display: flex;
					justify-content: center;
					align-items: center;

					.text {
						width: 16upx;
						height: 16upx;
						background-color: #222222;
						border-radius: 16upx;
					}
				}
			}
		}

		.jsq-wrapper {
			background-color: #efefef;

			.flex {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.box {
				padding: 1upx;
				flex: 1;
				height: 88upx;

				box-sizing: border-box;

				.inner {
					background-color: #fff;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 32upx;
				}

				&.del,
				&.empty {
					.inner {
						background-color: #ffffff00;
					}
				}
			}
		}
	}

	.pay-detail {
		width: 420upx;
		border-radius: 30upx;
		padding: 40upx;
		box-sizing: border-box;

		.title {
			margin: 24upx 0;

			.text {
				display: flex;
				justify-content: space-between;
				margin-top: 24upx;
				font-size: 32upx;
				color: #000000CC;
			}

			.all {
				justify-content: space-around;
				font-size: 40upx;
				color: #000000CC;
				border-bottom: 2upx solid #cccccc;
				text-align: center;
				padding: 0upx 0 40upx;
			}
		}

		.operate-wrapper {
			margin-top: 56upx;
			display: flex;
			justify-content: space-around;

			.button {
				width: 160upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				border-radius: 4upx
			}

			.del {
				background: #EBEDF0;
				color: #BFBEBE;
			}

			.confirm {
				background: #ff6200;
				color: #FFFFFF;
			}
		}
	}
</style>
